<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>实时评论系统</title>  
    <style>  
        /* 简单的样式，您可以根据需要自定义 */  
        .comment-box {  
            width: 100%;  
            padding: 10px;  
            margin-bottom: 10px;  
        }  
        .comment-count {  
            font-size: 12px;  
            color: gray;  
        }  
        .comments-section {  
            margin-top: 20px;  
        }  
        .comment {  
            margin-bottom: 10px;  
            padding: 5px;  
            border: 1px solid #ddd;  
            border-radius: 4px;  
        }  
    </style>  
</head>  
<body>  
    <div>  
        <textarea id="commentInput" class="comment-box" placeholder="写下你的评论..."></textarea>  
        <div class="comment-count" id="charCount">字符数: 0</div>  
        <button id="publishBtn">发布</button>  
    </div>  
    <div classcomments="-section" id="commentsSection">  

    </div>  
  
    <script>  
        const commentInput = document.getElementById('commentInput');  
        const charCount = document.getElementById('charCount');  
        const publishBtn = document.getElementById('publishBtn');  
        const commentsSection = document.getElementById('commentsSection');  
 
        commentInput.addEventListener('input', () => {  
            const textLength = commentInput.value.length;  
            charCount.textContent = `字符数: ${textLength}`;  
        });  
  
        // 发布评论（回车键或点击按钮）  
        function publishComment(event) {  
            event.preventDefault(); 
            const commentText = commentInput.value.trim();  
            if (commentText === '') {  
                alert('评论不能为空！');  
                return;  
            }  
  
            // 创建一个新的评论元素  
            const newComment = document.createElement('div');  
            newComment.className = 'comment';  
            newComment.textContent = commentText;  
  
           
            commentsSection.appendChild(newComment);  
  
            commentInput.value = '';  
            charCount.textContent = '字符数: 0';  
        }  
  

        commentInput.addEventListener('keydown', (event) => {  
            if (event.key === 'Enter' && !event.shiftKey) { 
                publishComment(event);  
            }  
        });  

        publishBtn.addEventListener('click', publishComment);  
    </script>  
</body>  
</html>